<template>
    <div id="graph"></div>
</template>

<script>
import echarts from 'echarts'

const graph = {
    "nodes": [
        { "name": "1", "category": 1, "label": "台风" },
        { "name": "2", "category": 2, "label": "洪水"},
        { "name": "4", "category": 3, "label": "山洪" },
        { "name": "8", "category": 4, "label": "飓风" },
        { "name": "16", "category": 5, "label": "暴雨" },
        { "name": "11", "category": 1, "label": "泥石流" },
        { "name": "12", "category": 2, "label": "大雾" },
        { "name": "14", "category": 3, "label": "霜冻" },
        { "name": "18", "category": 4, "label": "寒潮" },
        { "name": "116", "category": 5, "label": "小雨" }
    ],
    "links": [
        { "source": "1", "target": "2", "value": 1, "label": "因果" },
        { "source": "2", "target": "4", "value":4, "label": "措施" },
        { "source": "4", "target": "8", "value": 4, "label": "因果" },
        { "source": "4", "target": "8", "value": 4, "label": "危害" },
        { "source": "8", "target": "16", "value": 4, "label": "措施" },
        { "source": "16", "target": "1", "value": 4, "label": "因果" },
        { "source": "116", "target": "16", "value": 4, "label": "因果"}
    ],
    "categories": ["类别1", "类别2", "类别3", "类别4", "类别5", "类别6"]
}

export default {
    name: 'Graph',
    methods: {
        drawGraph: function (graph) {

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('graph'));

            var categories = [];
            for (var i = 0; i < graph['categories'].length; i++) {
                categories[i] = {
                    name: graph['categories'][i]
                };
            }

            graph.nodes.forEach(function (node) {
                node.itemStyle = null;
                node.symbolSize = 10;
                node.x = node.y = null; // Use random x, y
                node.draggable = true;
            });
            var option = {
                title: {
                    text: '气象图谱',
                    subtext: 'Default layout',
                    top: 'top',
                    left: 'right'
                },
                tooltip: {
                    trigger: "item",
                    formatter: param => {return param.data.label;}
                },
                legend: [{
                    // selectedMode: 'single',
                    data: categories.map(function (a) {
                        return a.name;
                    })
                }],
                animation: false,
                series : [
                    {
                        type: 'graph',
                        layout: 'force',
                        data: graph.nodes,
                        links: graph.links,
                        edgeLabel: {
                            show: true,
                            position: "middle",
                            formatter: param => {return param.data.label;},
                            verticalAlign: "bottom",
                            fontSize: 10
                        },
                        categories: categories,
                        roam: true,
                        label: {
                            show: true,
                            position: 'top',
                            formatter: param => {return param.data.label;}
                        },
                        force: {
                            repulsion: 200,
                            edgeLength: 100
                        },
                        edgeSymbol: ['none', 'arrow']
                    }
                ]
            };

            myChart.setOption(option);
        }
    },
    mounted: function () {
        this.drawGraph(graph);
    }
}
</script>

<style scoped>
#graph {
  width: 100%;
  height: 100%;
  border: 1px solid #dddddd;
}
</style>